<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="java.io.*"%>
<%@ page import="org.apache.solr.client.solrj.*"%>
<%@ page import="org.apache.solr.client.solrj.impl.*"%>
<%@ page import="org.apache.solr.common.*"%>
<%@ page import="org.apache.solr.client.solrj.response.*"%>
<%@ page import="org.apache.solr.client.solrj.request.*"%>
<%@ page import="org.apache.solr.client.solrj.beans.*"%>
<jsp:useBean id="ent" scope="request" class="bean.Info" />

<%
	request.setCharacterEncoding("UTF-8");
	String queryString = request.getParameter("search");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<%@ include file="header.jsp"%>
</head>
<style>
.pagination {
	display: inline-block;
	padding-left: 0;
	margin: 20px 0;
	border-radius: 4px;
}

.pagination>span {
	display: inline;
	position: relative;
	float: left;
	padding: 6px 12px;
	margin-left: -1px;
	line-height: 1.42857143;
	color: #777;
	text-decoration: none;
	background-color: #fff;
	border: 1px solid #ddd;
}

.pagination>span:first-child {
	margin-left: 0;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

.pagination>span:last-child {
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

.pagination>span:hover, .pagination>span:focus {
	color: #777;
	background-color: #eee;
	border-color: #ddd;
}

.pagination>.active, .pagination>.active:hover, .pagination>.active:focus
	{
	z-index: 2;
	color: #fff;
	cursor: default;
	background-color: #fed136;
	border-color: #fed136;
}
.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}
</style>

<!-- 구글api-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: '카테고리별 검색 비율',
          is3D: true,
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
</script>

<!--페이징-->
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript"
	src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<script>
 $(document).ready(function() {
  $('div.aaa').each(function() {
    var currentPage = 0;
    var numPerPage = 10;
    var $aaa = $(this);

     $aaa.find('div.bbb').hide()
       .slice(currentPage * numPerPage,
         (currentPage + 1) * numPerPage)
      .show();

	$aaa.bind('repaginate', function() {
      $aaa.find('div.bbb').hide()
        .slice(currentPage * numPerPage,
          (currentPage + 1) * numPerPage)
        .show();
    });
	
    var numRows = $aaa.find('div.bbb').length;
    var numPages = Math.ceil(numRows / numPerPage);
   
    var $pagination = $('<div class="pagination"></div>');
    
    for (var page = 0; page < numPages; page++) {
      $('<span class="page-number"></span>').text(page + 1)
        .bind('click', {newPage: page}, function(event) {
          currentPage = event.data['newPage'];
          $aaa.trigger('repaginate');
          $(this).addClass('active')
            .siblings().removeClass('active');
        }).appendTo($pagination).addClass('clickable');
    }
    $pagination.insertAfter($aaa)
      .find('span.page-number:first').addClass('active');
  });
});
</script>
<body id="page-top" class="index" >
	<section id="search">
	<div class="container">
		<%@ include file="_menu.jsp"%>
		<div class="mainbody">
			<div class="row">
				<div class="col-lg-12">
					<form name="searchform" method="post" action="search.jsp">
						<div class="form-group input-group">
							<input type="text" class="form-control" name="search"
								placeholder="<%=queryString%>"> <span
								class="input-group-btn">
								<button type="button" class="btn btn-small">
									<i class="fa fa-search"></i>
								</button>
							</span>
						</div>
						<p class="help-block text-danger"></p>
						<br> <br>
					</form>
				</div>
			</div>

			<div class="row">
				<div class="col-lg-8">
					<div class="app_var"></div>
					<div>관련 검색 :</div>
					<hr />
					<div class="aaa">
						<%
								

								if (queryString != null) {
									try {
										String url = "http://192.168.0.43:8080/solr/entertain";

										HttpSolrServer server = new HttpSolrServer(url);
										server.setParser(new XMLResponseParser());

										SolrQuery query = new SolrQuery();
										query.setQuery(queryString);

										query.setRequestHandler("/select");
										query.setFields("title", "url", "content", "tstamp");
										
										query.setParam("rows", "100");

										QueryResponse rsp = server.query(query);
										SolrDocumentList docs = rsp.getResults();

										for (SolrDocument doc : docs) {
							%>
						<div class="bbb">
							<h4>
								<a href="<%=doc.getFieldValue("url")%>" target="_new"><%=doc.getFieldValue("title")%></a>
							</h4>
							<%
								out.println("<h5>" + doc.getFieldValue("url") + "</h5>");
											doc.getFieldValue("content");
											String contentTmp = "" + doc.getFieldValue("content");
											if (contentTmp.length() > 50) {
												contentTmp = contentTmp.substring(0, 250);
											}
											ent.setContent(contentTmp);
											out.println(ent.getContent() + "<br />");
											out.println(doc.getFieldValue("tstamp") + "<br/><br/></div>");
											
										}
									} catch (Exception exc) {
										exc.printStackTrace();
									}
								}
							%>

						</div>
						<hr />
						<div>도움말 :</div>

					</div>
					
					
					<div class="col-sm-4">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">카테고리별 검색 비율</h3>
                            </div>
                            <div class="panel-body">
                                <div id="piechart_3d" style="width: 100%; height: 500px;"></div>
                            </div>
                        </div>
                    </div>
					
					
						
					
				</div>
			</div>
		</div>
	</div>
	<%@ include file="footer.jsp"%> </section>

</body>
</html>